import React from 'react';
import { BrowserRouter, NavLink } from 'react-router-dom'

export interface IHomePageState {
  name: string;
}

class HomeComponent extends React.Component<{}, IHomePageState> {
  constructor(props: {}) {
    super(props);
    this.state = {
      name: "",
    };
  }

  public setName = () => {
    this.setState({
      name: "icepy",
    });
  }

  public render() {
    const { name } = this.state;
    return (
      <div>
        <div onClick={this.setName}> set name </div>
        <div>{name}</div>

        <ul>
          <li><NavLink to="/app" activeClassName="selected">app</NavLink></li>
          <li><NavLink to="/home2" activeClassName="selected">home2</NavLink></li>
          <li><NavLink to="/a" activeClassName="selected">page 1</NavLink></li>
          <li><NavLink to="/b" activeClassName="selected">page 2</NavLink></li>
          <li><NavLink to="/c" activeClassName="selected">page 3</NavLink></li>
          <li><NavLink to="/d" activeClassName="selected">page 4</NavLink></li>
          <li><NavLink to="/SyncDemo" activeClassName="selected">SyncDemo</NavLink></li>
        </ul>
      </div>
    )
  }
}

export default HomeComponent
